<template>
	
  <view class="home">
	      <global-nav-bar title="淄博市妇女儿童活动中心" />
    <view class="logo">
<image style="width: 100px; height: 60px; background-color: #eeeeee;"  :src="logoSrc"
                       ></image>
    </view>
    <view class="search" @click="goSearch">
      <i class="iconfont icon-search-line"></i>
      <text>请输入关键字搜索</text>
    </view>
    <view class="banner">
      <uv-swiper
        :list="bannerList"
        indicator
        indicatorMode="line"
        circular height="224px"
        @click="handleBannerClick"
      />
    </view>
    <view class="gard">
      <uv-grid :col="5" @click="jumpPage">
        <uv-grid-item v-for="(item,index) in gridList" :key="index">
          <image class="grid-img" :src="item.url" alt="" mode="heightFix"/>
          <text class="grid-text">{{ item.title }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <view class="btnGroup">
      <view
        class="btn"
        v-for="(item,i) in btnList"
        :key="item.id"
        :style="{backgroundColor: item.bgc}"
        @click="handleBtnClick(i)"
      >
        <image class="btn-image" :src="item.image" alt="" mode="heightFix"/>
        <view class="btn-title">{{ item.title }}</view>
        <view class="btn-des">{{ item.des }}</view>
      </view>
    </view>
    <view class="news">
      <view class="news-title">
        <view class="title">
          <image src="/static/icons/news.png" alt="" mode="heightFix"/>
          <text>新闻资讯</text>
        </view>
        <view class="btn" @click="goNewsList">
          <text>更多</text>
          <i class="iconfont icon-sort"></i>
        </view>
      </view>
      <view class="news-list">
        <view class="news-list-item" v-for="item in newsList" :key="item.id"
              @click="goNewsDetails(item.id)">
          <view class="left">
            <view class="title">{{ item.title }}</view>
            <view class="time">{{ item.time }}</view>
            <view class="author">来源 | {{ item.author }}</view>
          </view>
          <view class="right">
            <image :src="item.image" alt="" mode="heightFix"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import http from '@/utils/request.js'
export default {
  name: 'Home',
  data() {
    return {
		logoSrc:'',
      bannerList: [

      ],
      gridList: [
        {title: '场馆简介', url: '/static/icons/cg.png', path: '/pagesA/pages/index/priefly'},
        {title: '参观预约', url: '/static/icons/yy.png', path: '/pages/booking/visit'},
        {title: '参观须知', url: '/static/icons/xz.png', path: '/pagesA/pages/index/notice'},
        {title: '导览', url: '/static/icons/map.png', path: '/pagesB/pages/news/map_list'},
        {title: '线上场馆', url: '/static/icons/cg.png', path: '/pagesB/pages/news/venue_list'},

      ],
      btnList: [
/*        {
          id: 1,
          title: '加入会员',
          des: '享受会员权益',
          image: '/static/icons/vip.png',
          bgc: '#ebf5fe'
        }, */
        {
          id: 2,
          title: '加入志愿者',
          des: '点亮科技馆事业',
          image: '/static/icons/zyz.png',
          bgc: '#ebf5fe'
        },
      ],
      newsList: []
    }
  },
  onLoad() {
	this.indexData();
  },
  methods: {
    handleBannerClick(index) {
      const id = this.bannerList[index].id
      this.goNewsDetails(id)
    },
    handleBtnClick(index) {
      // 根据索引找数据
      const path = ['/pagesB/pages/by/volunteer']
      const url = path[index]
      !url ? uni.showToast({icon: 'error',title: '暂未开放'}) : uni.navigateTo({url})
    },
    goNewsList() {
      uni.navigateTo({url: '/pagesB/pages/news/list'})
    },
    goNewsDetails(id) {
      uni.navigateTo({url: `/pagesB/pages/news/details?id=${id}`})
    },
    goSearch() {
      uni.navigateTo({url: '/pagesA/pages/search/index'})
    },
    jumpPage(index) {
      const url = this.gridList[index].path
      !url ? uni.showToast({icon: 'error',title: '暂未开放'}) : uni.navigateTo({url})
    },
	indexData(){
		var that = this;
		http.post('api/index/index',{}).then(function(data){
			that.logoSrc = http.common.baseUri + data.data.logo;
			let banner = data.data.images;
			let bannerNum = banner.length;
			for(let i = 0; i < bannerNum; i++){
				that.bannerList.push({id:banner[i].id,'url':http.common.baseUri+banner[i].image})
			}
			
			let news = data.data.list;
			let newsNum = news.length;
			for(let i = 0; i < newsNum; i++){
				that.newsList.push({
					id : news[i].id,
					title : news[i].title,
					time : news[i].addtime_date,
					author:news[i].source ? news[i].source : '妇女儿童协会',
					image : http.common.baseUri+news[i].topimg
				})
			}
			/* 
			 
			 {
			   id: 1,
			   title: '【精彩回顾】淄博市展览馆“趣味科普 乐享百万乐享百万乐享百万乐享百万”',
			   time: '2024-08-20',
			   author: '淄博市展览馆',
			   image: '/static/images/news.png'
			 },*/
		})
	}
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: calc(100% - 60rpx);
  padding: 0 30rpx;

  .logo {
    width: 100%;
    height: 112rpx;
    line-height: 112rpx;
    text-align: center;

  }

  .search {
    margin-top: 20rpx;
    width: calc(100% - 28rpx);
    height: 56rpx;
    padding-left: 28rpx;
    background-color: #efefef;
    border-radius: 56rpx;
    color: #999;
    @include flex(row, flex-start, center);

    i {
      font-size: 28rpx;
      font-weight: bold;
    }

    text {
      margin-left: 18rpx;
      font-size: 24rpx;
    }
  }

  .banner {
    width: 100%;
    margin-top: 30rpx;
    height: 448rpx
  }

  .gard {
    margin-top: 40rpx;

    /deep/.uv-grid {
      &-item {
        margin-bottom: 20rpx;
        .iconfont {
          font-size: 54rpx;
        }

        .grid-img {
          width: 54rpx;
          height: 54rpx;
        }

        .grid-text {
          margin-top: 22rpx;
          font-size: 22rpx;
        }
      }
    }
  }

  .btnGroup {
    width: 100%;
    margin-top: 26rpx;
    @include flex(row, space-between, flex-start);
    flex-wrap: wrap;

    .btn {
      height: 190rpx;
      width: calc(50% - 10rpx);
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      @include flex(column, center, center);

      .btn-image {
        height: 84rpx;
      }

      .btn-title {
        margin-top: 10rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #32323c;
      }

      .btn-des {
        margin-top: 16rpx;
        font-size: 22rpx;
        color: #313b44;
      }
    }
  }

  .news {
    margin-top: 30rpx;

    &-title {
      width: 100%;
      @include flex(row, space-between, center);

      .title {
        @include flex(row, flex-start, center);

        image {
          height: 34rpx;
        }

        text {
          margin-left: 10rpx;
          font-size: 34rpx;
          color: #343434;
        }
      }

      .btn {
        @include flex(row, center, center);
        font-size: 26rpx;
        color: #9d9d9d;
        .iconfont {
          margin-left: 10rpx;
        }
      }
    }

    &-list {
      width: 100%;
      margin-top: 40rpx;

      &-item {
        width: 100%;
        @include flex(row, space-between, flex-start);
        margin-bottom: 28rpx;

        .right {
          width: 260rpx;
          height: 172rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .left {
          width: 0;
          flex: 1;
          margin-right: 72rpx;
          .title {
            font-size: 32rpx;
            @include text_ellipsis(2);
          }
          .time {
            margin-top: 22rpx;
            font-size: 22rpx;
            color: #a3a3a5;
          }
          .author {
            margin-top: 12rpx;
            font-size: 22rpx;
            color: #a3a3a5;
          }
        }
      }
    }
  }
}
</style>
